import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    container: { backgroundColor: '#fff', flex: 1 },
    topContainer: {
        paddingTop: 15,
        paddingBottom: 30,
        borderBottomLeftRadius: 40,
        borderBottomRightRadius: 40,
        backgroundColor: 'rgb(242, 242, 242)',
        flexDirection: 'row',
    },
    topLeft: {
        flex: 1,
        padding: 20,
        justifyContent: 'center',
    },
    name: {
        fontSize: 26,
        fontWeight: 'bold',
        marginBottom: 5,
    },
    sing: {
        fontSize: 13,
        color: '#D5D5D5',
    },
    avatarContainer: {
        alignSelf: 'center',
        marginRight: 20,
        marginBottom: 45,
    },
    avatar: {
        width: 80,
        height: 80,
        borderRadius: 40,
    },
    edit: {
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: 26,
        height: 26,
        borderWidth: 2,
        borderColor: '#fff',
        borderRadius: 13,
    },
    tagList: {
        marginTop: 40,
        flexDirection: 'row',
    },
    tag: {
        marginRight: 30,
        alignItems: 'center',
    },
    num: {
        fontSize: 20,
        fontWeight: '500',
    },
    tagName: {
        marginTop: 5,
        fontSize: 12,
        color: '#D5D5D5',
    },
    midContainer: {
        marginTop: 20,
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    midButton: {
        alignItems: 'center',
    },
    midButtonImg: {
        width: 32,
        height: 32,
    },
    midButtonTag: {
        marginTop: 5,
        fontSize: 12,
    },
    bottomBtnContainer: {
        padding: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    typeContainer: {
        flexDirection: 'row',
    },
    typeNameContainer: {
        width: 80,
        height: 36,
        borderRadius: 18,
        backgroundColor: '#101010',
        justifyContent: 'center',
        alignItems: 'center',
    },
    typeName: {
        fontSize: 12,
        color: '#fff',
    },
    typeIconContainer: {
        width: 36,
        height: 36,
        borderRadius: 18,
        backgroundColor: 'rgb(231, 231, 231)',
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: 10,
    },
    typeIcon: {
        width: 16,
        height: 16,
    },
    addIconContainer: {
        width: 36,
        height: 36,
        borderRadius: 18,
        backgroundColor: 'rgb(231, 231, 231)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    add: {
        width: 20,
        height: 20,
    },
});
